<template>
  <div class="smart-clip">
    <!-- 图文剪辑 start -->
    <div class="smart-clip-header">
      <div class="smart-clip-header-title_top">开始使用图文剪辑</div>
      <div class="smart-clip-header-desc">更轻量，轻松产出优质图文</div>
      <div class="smart-clip-header-btngroup">
        <a-button
          @click="addGraphicEditing"
          type="primary"
          style="border: none; border-radius: 6px; margin-right: 20px"
          ><PlusOutlined :style="{ fontSize: '12px' }" />创建图文剪辑</a-button
        >
      </div>
    </div>
    <!-- 图文剪辑头部 end -->

    <!-- content stert-->
    <div class="smart-clip-content">
      <div class="search-area">
        <div class="n-grid">
          <div class="n-grid-item">
            <div class="n-input-group">
              <a-button style="width: 130px">剪辑名称</a-button>
              <a-input
                v-model:value="state.searchData.title"
                placeholder="请输入剪辑名称"
                allowClear
                style="width: calc(100% - 130px)"
              />
            </div>
          </div>
          <div class="n-grid-item">
            <div class="n-input-group">
              <a-button style="width: 120px">剪辑状态</a-button>
              <a-select
                allowClear
                placeholder="请选择剪辑状态"
                v-model:value="state.searchData.status"
                style="width: calc(100% - 130px)"
                :options="state.statusOptions"
              >
              </a-select>
            </div>
          </div>
          <div class="n-grid-item">
            <div class="n-input-group">
              <a-select
                ref="select"
                v-model:value="state.searchData.date_type"
                style="border-radius: 0 !important"
              >
                <a-select-option value="1">创建时间</a-select-option>
                <a-select-option value="2">更新时间</a-select-option>
              </a-select>
              <a-range-picker
                style="width: calc(100% - 130px); border-radius: 0 5px 5px 0"
                v-model:value="state.searchData.dateTime"
                :ranges="ranges"
                valueFormat="YYYY-MM-DD"
              />
            </div>
          </div>
          <div class="n-grid-item" v-if="state.isExpend">
            <div class="n-input-group">
              <a-button style="width: 130px">关联项目</a-button>
              <a-input
                v-model:value="state.searchData.merchant_name"
                placeholder="请填写关联项目"
                allowClear
                style="width: calc(100% - 130px)"
              />
            </div>
          </div>
          <div class="n-grid-item last-gird-item">
            <div class="n-input-group grid-btn">
              <a-button
                type="primary"
                style="border: none; border-radius: 6px"
                @click="searchClick"
              >
                <SearchOutlined />查询
              </a-button>
              <a-button
                ghost
                type="primary"
                style="
                  border: 1px solid #e0e0e6;
                  color: #000;
                  border-radius: 6px;
                  margin-left: 15px;
                "
                @click="resettingClick"
              >
                <ReloadOutlined />重置
              </a-button>
              <a-button type="link" @click="state.isExpend = !state.isExpend">
                <DownOutlined style="color: #2878ff" v-if="!state.isExpend" />
                <UpOutlined style="color: #2878ff" v-else />
                <span style="color: #2878ff">
                  {{ state.isExpend ? "收起" : "展开" }}
                </span>
              </a-button>
            </div>
          </div>
        </div>
      </div>

      <div class="table-content">
        <a-table
          :columns="state.columns"
          :data-source="state.tableList"
          :pagination="pagination"
          @change="handleTableChange"
          :loading="state.loading"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key == 'title'">
              <div>
                <a-tooltip placement="top">
                  <template #title>
                    <span>{{ record.id }}</span>
                  </template>
                  {{ record.title }}
                </a-tooltip>
              </div>
              <div style="color: #999999" v-if="record.merchant">
                {{ record.merchant.name }}
              </div>
            </template>
            <template v-if="column.key == 'status'">
              <div class="status">
                <a-row justify="space-between">
                  <a-col>{{ record.status_text }}</a-col>
                  <a-popover>
                    <template #content>
                      <div>剪辑成功：{{ record.clips_number }}</div>
                    </template>
                    <a-col>
                      {{ record.clips_number }}/{{ record.pre_generate_number }}
                    </a-col>
                  </a-popover>
                </a-row>
                <a-progress
                  v-if="record.status == 1"
                  strokeColor="#3976ff"
                  :percent="100"
                  status="active"
                  :show-info="false"
                />
                <a-progress
                  v-else
                  :strokeColor="record.status == 2 ? '#52c41a' : '#2878FF'"
                  :percent="
                    (record.clips_number / record.pre_generate_number) * 100
                  "
                  :show-info="false"
                />
              </div>
            </template>

            <template v-if="column.key == 'time'">
              <div>创建时间: {{ record.created_at }}</div>
              <div>最近更新时间: {{ record.updated_at }}</div>
            </template>

            <template v-if="column.key == 'folder_statck'">
              <div>
                {{ record.folder_statck.folder_name }}({{
                  record.folder_statck.id
                }})
              </div>
            </template>

            <template v-if="column.key == 'action'">
              <a-space>
                <a-button
                  v-if="record.button.view_video"
                  type="text"
                  style="color: #2878ff"
                  @click="viewWhole(record)"
                >
                  查看成片
                </a-button>
                <a-button
                  v-if="record.button.edit"
                  type="text"
                  style="color: #2878ff"
                  @click="editRecord(record)"
                >
                  编辑
                </a-button>
                <a-popconfirm
                  title="是否要复制并创建?"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="moreClick(record, 'copy')"
                >
                  <a-button type="text" style="color: #2878ff">
                    复制并创建
                  </a-button>
                </a-popconfirm>
                <a-button
                  type="text"
                  style="color: #2878ff"
                  @click="moreClick(record, 'edit')"
                >
                  剪辑信息
                </a-button>
                <!-- <a-button  type="text" style="color: #2878FF"
									@click="moreClick(record, 'copy')">
									删除
								</a-button> -->
                <!-- <a-button
									v-if="record.button.re_clip" type="text" style="color: #2878FF"
									@click="editAgain(record)">
									再次剪辑
								</a-button> -->
                <a-popconfirm
                  title="是否要复制并创建?"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="moreClick(record, 'copy')"
                >
                  <a-button
                    v-if="record.button.copy_and_create"
                    type="text"
                    style="color: #2878ff"
                  >
                    复制并创建
                  </a-button>
                </a-popconfirm>
                <a-button
                  v-if="record.button.more"
                  type="text"
                  style="color: #2878ff"
                  @click="deleteRecord(record)"
                >
                  删除
                </a-button>

                <a-button
                  v-if="record.button.delete"
                  type="text"
                  style="color: #2878ff"
                  @click="deleteRecord(record)"
                >
                  删除
                </a-button>
                <a-button
                  v-if="recordTab == 2 && record.status !== 2"
                  type="text"
                  style="color: #2878ff"
                  @click="exportClick(record)"
                >
                  选择导出
                </a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </div>
    </div>
    <!-- content end -->

    <!-- 新建剪辑 -->
    <NewClip
      :visible="newClipVisible"
      :data="{ editModel: 5, type: 'image', comeFrom: 'GraphicEditing' }"
      @onCancel="newClipVisible = false"
      @onSubmit="onSubmit"
    />

    <!-- 删除提示框 -->
    <a-modal
      v-model:visible="state.deleteVisible"
      @ok="deleteHandleOk"
      :confirmLoading="state.confirmLoading"
    >
      <div style="font-size: 20px">提示</div>
      <div style="font-size: 16px; margin: 5px 0">
        确定要删除
        <span style="color: #2878ff">{{ state.clipRecord.title }}</span> 么？
      </div>
      <a-checkbox v-model:checked="state.checked"
        >同时删除素材库相关的成片文件</a-checkbox
      >
    </a-modal>
  </div>
</template>

<script setup>
import { reactive, computed, ref, createVNode, onMounted, watch } from "vue";
import { DownOutlined, UpOutlined, PlusOutlined } from "@ant-design/icons-vue";

import { useRouter, useRoute } from "vue-router";
import { Modal, message } from "ant-design-vue";
// 新建剪辑
import NewClip from "@/views/shotstack/Workbenche/modules/NewClip.vue";

// 工具和模拟数据
// 封装的请求
import request from "@/common/utils/request";

const router = useRouter();
const route = useRoute();
// 新建剪辑弹窗开关
const newClipVisible = ref(false);
const state = reactive({
  searchData: {
    title: "",
    date_type: "1",
    status: undefined,
    merchant_name: "",
    dateTime: [],
  },
  statusOptions: [
    {
      // 剪辑状态
      label: "待剪辑",
      value: 0,
    },
    {
      label: "剪辑中",
      value: 1,
    },
    {
      label: "完成",
      value: 2,
    },
    {
      label: "失败",
      value: 4,
    },
    // {
    // 	label: "失败(二次剪辑)",
    // 	value: 5,
    // },
  ],
  columns: [
    {
      title: "名称",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
    },
    {
      title: "时间信息",
      dataIndex: "time",
      key: "time",
    },
    {
      title: "画面比例",
      dataIndex: "aspect_ratio",
      key: "aspect_ratio",
    },
    {
      title: "导出文件夹",
      dataIndex: "folder_statck",
      key: "folder_statck",
    },
    {
      title: "操作",
      dataIndex: "action",
      key: "action",
    },
  ],
  title: "", // 剪辑名称
  date_type: "1", // 创建时间类型
  checked: false, // 是否同时删除素材库相关的成片文件
  confirmLoading: false, // 删除确定按钮loding
  deleteVisible: false, // 删除提示框开关
  clipRecord: {}, // 当前即将删除的项
  tableList: [],
  isExpend: false,
  page: 1,
  pageSize: 10,
});

// 删除确定
const deleteHandleOk = () => {
  state.confirmLoading = true;
  request
    .del("/work_ai", "/user/shotstack/clip/delete", {
      editing_record_id: state.clipRecord.id,
      isDelSliceFolder: state.checked ? 1 : 0,
    })
    .then(() => {
      state.checked = false;
      message.success("删除成功");
      state.confirmLoading = false;
      state.deleteVisible = false;
      getClipList();
    });
};
// 创建剪辑项目
const addGraphicEditing = () => {
  newClipVisible.value = true;
};

// 再次编辑
const editAgain = (record) => {
  // editRecord(record);
  router.push({
    name: "EditingCenterPreview",
    query: {
      id: record.id,
      type: "again",
      edit_model: record.edit_model,
    },
  });
};
// 查看成片
const viewWhole = (record) => {
  router.push({
    name: "Synthesis",
    query: {
      detail_id: record.id,
      merchant_library_id: record.merchant_library_id,
    },
  });
};

//脚本剪辑=> 更多
const moreClick = (record, type) => {
  switch (type) {
    case "copy":
      // 复制并创建
      copyAndCreate(record.id);
      break;
    case "edit":
      router.push({
        name: "ClipDetail",
        query: {
          detail_id: record.id,
        },
      });
      break;
    case "delete":
      deleteRecord(record);
      break;
  }
};
// 复制并创建
const copyAndCreate = (id) => {
  request
    .post("/work_ai", "/user/shotstack/clip/copy", {
      id,
    })
    .then((res) => {
      getClipList();
      message.success("创建成功！");
    });
};

onMounted(() => {
  getClipList();
});

// 剪辑记录
const getClipList = () => {
  let params = {
    edit_model: 5,
    page: state.page,
    pageSize: state.pageSize,
    ...state.searchData,
  };
  if (params.dateTime) {
    params.start_date = params.dateTime[0];
    params.end_date = params.dateTime[1];
    params.dateTime = undefined;
  }
  state.loading = true;
  request
    .get("/work_ai", "/user/shotstack/clip/list", params)
    .then((res) => {
      state.tableList = res.result.data;
      state.loading = false;
      state.total = res.result.total;
    })
    .catch(() => {
      state.loading = false;
    });
};

// 搜索
const searchClick = () => {
  state.page = 1;
  state.pageSize = 10;
  getClipList();
};

// 重置
const resettingClick = () => {
  state.searchData.title = "";
  state.searchData.date_type = "1";
  state.searchData.status = undefined;
  state.searchData.dateTime = [];
  state.searchData.merchant_name = "";
  state.page = 1;
  state.pageSize = 10;
  getClipList();
};

// 编辑
const editRecord = (params) => {
  window.open(
    `${window.location.origin}/#/editingCenter?title=${params.title}&aspect_ratio=${params.aspect_ratio}&edit_model=${params.edit_model}&id=${params.id}&merchant_library_id=${params.merchant_library_id}&merchant_folder_statck_id=${params.merchant_folder_statck_id}&comeFrom=GraphicEditing`
  );
};

// 删除
const deleteRecord = (record) => {
  state.clipRecord = record;
  state.deleteVisible = true;
};
</script>

<style lang="less" scoped>


.smart-clip {
  padding: 14px 14px 0;
}

.smart-clip-header {
  padding: 15px;
  height: 150px;
  min-width: 1140px;
  margin-top: 20px;
  background: linear-gradient(135deg, #f3f7ff, rgba(159, 191, 255, 0.4));
  // background: linear-gradient(202deg, #f1f5ff, rgba(159, 191, 255, 0.4));
  display: flex;
  flex-direction: column;

  .smart-clip-header-title_top {
    font-size: 24px;
    color: #0c0d0e;
  }

  .smart-clip-header-desc {
    font-size: 14px;
    color: #737a87;
    margin-top: 5px;
  }

  .smart-clip-header-btngroup {
    margin-top: 15px;
  }
}

.smart-clip-content {
  // 搜索区域
  .search-area {
    margin-top: 20px;
    button {
      border-radius: 5px 0 0 5px;
    }

    .ss-input-affix-wrapper {
      border-radius: 0 5px 5px 0;
    }

    .ss-select {
      border-radius: 0 5px 5px 0;
    }

    .n-grid {
      display: flex;
    }

    /* 当屏幕宽度大于等于 1200px 时应用的样式 */
    @media screen and (min-width: 1200px) {
      /* 在这里添加针对 1200px 及以上屏幕宽度的样式 */
      .n-grid {
        display: grid;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(0px, 1fr));
        gap: 20px 16px;
      }
      .last-gird-item {
        grid-column: 4 / span 1 !important;
        display: flex;
        justify-content: flex-end;
      }
    }
    /* 当屏幕宽度小于 1199px 时应用的样式 */
    @media screen and (max-width: 1199px) {
      /* 在这里添加针对 799px 及以下屏幕宽度的样式 */
      .n-grid {
        display: grid;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0px, 1fr));
        gap: 20px 16px;

        .last-gird-item {
          grid-column: 2 / span 1;
        }
      }
    }

    .n-grid-item {
      grid-column: span 1 / span 1;
    }

    .n-input-group {
      display: inline-flex;
      width: 100%;
      flex-wrap: nowrap;
      vertical-align: bottom;
    }

    .grid-btn {
      display: flex;
      justify-content: flex-end;
    }
  }

  .table-content {
    margin-top: 30px;

    .status:hover {
      color: #2878ff;
      cursor: pointer;
    }
  }
}
</style>
